<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情侣APP - 电量监控</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 电量界面 -->
        <div class="screen">
            <div class="screen-title">电量监控</div>
            <div class="battery-screen">
                <div class="battery-cards">
                    <div class="battery-card">
                        <div class="battery-header">
                            <div class="battery-user">我的手机</div>
                            <div class="battery-status">正在充电</div>
                        </div>
                        <div class="battery-bar">
                            <div class="battery-level" style="width: 85%;"></div>
                        </div>
                        <div class="battery-info">
                            <div>85%</div>
                            <div>预计剩余5小时32分钟</div>
                        </div>
                        <div class="battery-stats">
                            <div class="battery-stat-item">
                                <div class="battery-stat-title">最近充电</div>
                                <div class="battery-stat-value">1小时前</div>
                            </div>
                            <div class="battery-stat-item">
                                <div class="battery-stat-title">今日充电次数</div>
                                <div class="battery-stat-value">2次</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="battery-card">
                        <div class="battery-header">
                            <div class="battery-user">TA的手机</div>
                            <div class="battery-status">未充电</div>
                        </div>
                        <div class="battery-bar">
                            <div class="battery-level low" style="width: 42%;"></div>
                        </div>
                        <div class="battery-info">
                            <div>42%</div>
                            <div>预计剩余2小时15分钟</div>
                        </div>
                        <div class="battery-stats">
                            <div class="battery-stat-item">
                                <div class="battery-stat-title">最近充电</div>
                                <div class="battery-stat-value">3小时前</div>
                            </div>
                            <div class="battery-stat-item">
                                <div class="battery-stat-title">今日充电次数</div>
                                <div class="battery-stat-value">1次</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="event-item">
                        <div class="event-title">电量提醒</div>
                        <div class="event-desc">当TA的电量低于20%时，我们会通知你</div>
                        <div class="battery-settings">
                            <div class="setting-toggle">
                                <span>低电量提醒</span>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <div class="setting-toggle">
                                <span>充电完成提醒</span>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item" data-page="dashboard.html">
                        <i class="fas fa-home"></i>
                        <span>主页</span>
                    </div>
                    <div class="nav-item" data-page="calendar.html">
                        <i class="fas fa-calendar"></i>
                        <span>日历</span>
                    </div>
                    <div class="nav-item" data-page="capsule.html">
                        <i class="fas fa-clock"></i>
                        <span>时空胶囊</span>
                    </div>
                    <div class="nav-item" data-page="settings.html">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    <script>
        // 页面跳转逻辑
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const page = this.getAttribute('data-page');
                if (page) {
                    window.location.href = page;
                }
            });
        });
        
        // 初始化电池动画
        function initBatteryAnimation() {
            // 获取电池元素
            const batteryLevels = document.querySelectorAll('.battery-level');
            
            // 为每个电池元素添加动画
            batteryLevels.forEach(level => {
                const width = level.style.width;
                level.style.width = '0';
                
                setTimeout(() => {
                    level.style.transition = 'width 1.5s ease-in-out';
                    level.style.width = width;
                }, 300);
            });
        }
        
        // 页面加载时初始化电池动画
        document.addEventListener('DOMContentLoaded', function() {
            initBatteryAnimation();
        });
    </script>
</body>
</html> 